<template>
  <a-modal title="打印条码" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="close">
    <div ref="printRef">
      <barcode v-if="code" :value="code" :options="option"></barcode>
    </div>
  </a-modal>
</template>

<script>
import barcode from '@xkeshi/vue-barcode'
import printJs from 'print-js'
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      code: undefined,
      option: {
        displayValue: true, //是否默认显示条形码数据
        background: '#fff', //条形码背景颜色
        height: '25px',
        fontSize: '12px',
        lineColor: '#606266',
      },
    }
  },
  components: { barcode },
  methods: {
    handleOk() {
      printJs({
        printable: this.$refs.printRef,
        type: 'html'
      })
    },
    open({ code }) {
      this.code = code
      this.visible = true
    },
    close() {
      this.code = undefined
      this.visible = false
    },
  },
}
</script>

<style lang="scss" scoped>
</style>